<template>
  <div class="housedetail">
    <!-- <iframe class="iheader" src="header.html"></iframe> -->
    <!-- 头 -->
    <myHeader></myHeader>
    <!-- 面包屑 -->
    <div class="bread">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item
          class="breadcrumbone"
          style="color: #00ac86"
          :to="{ path: '/' }"
          >首页</el-breadcrumb-item
        >
        <el-breadcrumb-item>房源</el-breadcrumb-item>
        <el-breadcrumb-item>房源详情</el-breadcrumb-item>
        <!-- <el-breadcrumb-item>活动详情</el-breadcrumb-item> -->
      </el-breadcrumb>
    </div>
    <!-- 面包屑结束 -->
    <!-- 房屋信息概述 -->
    <div class="houseInfo">
      <div class="info" :model="houseinfo">
        <div style="clear: both"></div>
        <div id="content">
          <div class="a1">
            <!-- 大图 -->
            <div class="imgpic">
              <img class="big" :src="Img" />
            </div>
            <!-- 小图 -->
            <div class="a11">
              <ul
                class="pic_smallbox"
                v-for="(item, index) in smallbox_img"
                :key="index"
              >
                <li
                  @click="getImg(index)"
                  :class="activeNum === index ? 'active' : ''"
                >
                  <img :src="item" />
                </li>
                <!-- <li><img src="@/assets/carousel/house2.jpg" /></li>
              <li><img src="@/assets/carousel/house3.jpg" /></li>
              <li><img src="@/assets/carousel/house4.jpg" /></li> -->
              </ul>
            </div>
          </div>
          <div class="a2">
            <h2>{{ houseinfo.title }}</h2>
            <div class="a21">
              <div class="a211">
                <span class="color">租金</span>
                <span class="prices">{{ houseinfo.money }}元/月</span>
                <!-- <span class="shic">市场价<span class="prices2">￥2500</span></span> -->
                <!-- <span class="yis">已售6264件</span> -->
              </div>
              <div class="a22">
                <p></p>
                <span class="color">户型</span>
                <span class="neir"
                  >{{ houseinfo.bedroom }}室{{ houseinfo.living }}厅{{
                    houseinfo.toilet
                  }}卫</span
                >
                <p></p>
                <span class="color">建筑面积</span>
                <span class="neir">{{ houseinfo.area }}平米</span>
                <p></p>
                <span class="color">楼层</span>
                <span class="neir"
                  >{{ houseinfo.floor }}层（共{{ houseinfo.allfloor }}层）</span
                >
                <p></p>
                <span class="color">租赁方式</span>
                <span class="neir">{{
                  houseinfo.mode == 0 ? "整租" : "合租"
                }}</span>
              </div>
              <div class="a23">
                <p></p>
                <span class="color">城市</span>
                <p>{{ houseinfo.city }}</p>
                <span class="color">详细地址</span>
                <p>{{ houseinfo.houseSite }}</p>
              </div>

              <div class="a25">
                <div v-if="houseinfo.rentIs">
                  <button class="a25color1">已出租</button>
                </div>
                <!-- 当房屋未出租/还有空房间（合租）时显示联系房东。租了同一个房子就是室友 -->
                <div v-else>
                  <el-button
                    class="a25color2"
                    type="text"
                    @click="(centerDialogVisible = true), renting"
                    >联系房东</el-button
                  >
                  <!-- <button class="a25color2">
                    联系房东
                  </button> -->
                </div>
                <!-- 弹窗 -->
                <el-dialog
                  title="请联系房东"
                  :visible.sync="centerDialogVisible"
                  height="300px"
                  center
                >
                  <!-- 房东信息 -->
                  <el-descriptions title="房东信息" :model="masterinfo">
                    <el-descriptions-item label="用户名"
                      ><div
                        style="cursor: pointer"
                        @click="$router.push('/userdetail?id=' + masterinfo.id)"
                      >
                        {{ masterinfo.nikeName }}
                      </div></el-descriptions-item
                    >
                    <el-descriptions-item label="手机号">{{
                      masterinfo.phone
                    }}</el-descriptions-item>
                    <el-descriptions-item label="邮箱">{{
                      masterinfo.email
                    }}</el-descriptions-item>
                    <el-descriptions-item
                      :labelStyle="{
                        'font-weight': '600',
                        'padding-left': '105px',
                        'padding-top': '10px',
                        'font-size': '17px',
                      }"
                      :contentStyle="{
                        'font-weight': '600',
                        'padding-left': '10px',
                        'padding-top': '10px',
                        'font-size': '17px',
                      }"
                      label="注意"
                      ><i class="icon iconfont icon-zhuyi"></i>

                      请与房东联系，沟通完毕后点击下一步填写租房信息
                    </el-descriptions-item>
                  </el-descriptions>

                  <!-- 房东信息结束 -->
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="centerDialogVisible = false"
                      >取 消</el-button
                    >
                    <el-button type="primary" @click="renting"
                      >下一步</el-button
                    >
                  </span>
                </el-dialog>
              </div>
            </div>
          </div>
        </div>
        <div style="clear: both"></div>
      </div>
      <!-- 房屋信息概述结束 -->

      <!-- 分页 -->
      <div class="detail">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <!-- 房屋详情 -->
          <el-tab-pane label="房屋详情" name="first">
            <div class="describe">
              <div class="title">房源描述</div>
              <div class="cont">
                {{ houseinfo.content }}
              </div>
            </div>

            <div class="install">
              <div class="title">配套设施</div>
              <div class="cont">
                <ul>
                  <li
                    v-if="houseinfo.bedroom != null && houseinfo.bedroom != 0"
                  >
                    卧室
                  </li>
                  <li v-if="houseinfo.living != null && houseinfo.living != 0">
                    客厅
                  </li>
                  <li
                    v-if="houseinfo.kitchen != null && houseinfo.kitchen != 0"
                  >
                    厨房
                  </li>
                  <li v-if="houseinfo.toilet != null && houseinfo.toilet != 0">
                    厕所
                  </li>
                  <li v-if="houseinfo.elevator == true">电梯</li>
                </ul>
              </div>
            </div>

            <div class="picture">
              <div class="title">房源图片</div>
              <div class="cont">
                <div v-for="(item, index) in smallbox_img" :key="index">
                  <div class="img">
                    <el-image :src="item"></el-image>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <!-- 房屋详情结束 -->
          <!-- 租客评价（引入组件） -->
          <el-tab-pane label="租客评价" name="second"
            ><housecom></housecom
          ></el-tab-pane>
          <!-- 租客评价结束 -->
        </el-tabs>
      </div>
      <!-- 分页结束 -->

      <!-- <iframe class="ifooter" src="footer.html"></iframe> -->
    </div>
  </div>
</template>
<script>
import myHeader from "../../components/myHeader.vue";
import housecom from "../house/housecom.vue";
import request from "@/utils/request";
export default {
  components: {
    myHeader,
    housecom,
  },
  data() {
    return {
      id: null,
      centerDialogVisible: false,
      activeName: "first",
      activeNum: 0,
      sold: false,
      // 大图默认放置图1
      Img: "",
      bigImg: [],
      smallbox_img: [],
      houseinfo: {},
      masterinfo: {},
    };
  },
  created() {
    this.id = this.$route.query.id;
    request.get("/house/" + this.id).then((res) => {
      if (res.code === 200) {
        this.houseinfo = res.data;
        console.log(this.houseinfo);
        request
          .get("/file/houseimgs/" + this.houseinfo.houseAccount)
          .then((res) => {
            if (res.code === 200) {
              for (var i in res.data) {
                this.bigImg.push(res.data[i].url);
              }
              this.smallbox_img = this.bigImg;
              this.Img = this.bigImg[0];
              this.findOwner();
            } else {
              this.$notify.error(res.msg);
            }
          });
      } else {
        this.$notify.error(res.msg);
      }
    });
  },
  methods: {
    findOwner() {
      request.get("/house/owner/" + this.id).then((res) => {
        if (res.code === 200) {
          this.masterinfo = res.data;
        } else {
          this.$notify.error(res.msg);
        }
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 点击小图切换大图，选中的小图改变样式
    getImg(index) {
      this.Img = this.bigImg[index];
      this.activeNum = index;
    },
    // 弹窗点击下一步，跳转至填写订单页面
    renting() {
      console.log(this.id);
      this.centerDialogVisible = false;
      this.$router.push("/renting?id=" + this.id);
    },
  },
};
</script>
<style scoped>
iframe {
  width: 1200px;
  margin: auto;
}

.housedetail {
  position: relative;
}

.bread {
  position: absolute;
  left: 12%;
}
.el-breadcrumb {
  font-size: 18px;
  line-height: 3;
}
.houseInfo {
  margin-top: -8px;
  position: relative;
}
.info {
  position: absolute;
  top: 60px;
  left: 50%;
  margin-left: -542px;
}

.detail {
  position: absolute;
  top: 600px;
  width: 1100px;
  left: 50%;
  margin-left: -550px;
}
/* tab颜色不起效果 */
.el-tabs__item.is-active {
  color: #00a988 !important;
}
.el-tabs__item:hover {
  color: #00a988 !important;
}
/* tab颜色不起效果结束 */
/* 弹窗开始 */
.el-dialog .el-dialog--center {
  width: 607px;
  height: 300px;
}

.el-dialog__footer {
  width: 300px;
  margin-left: 106px;
}
button.el-button.el-button--default {
  width: 100px;
  height: 43px;
}
button.el-button.el-button--primary {
  width: 100px;
  height: 43px;
}
/* 弹窗结束 */
.all {
  width: 100%;
  height: 810px;
  padding-bottom: 50px;
  margin-top: -80px;
  margin-bottom: 1px;
}
.all .content {
  margin-top: 0px;
  float: left;
}

#content {
  /* 	border: 1px solid red; */
  width: 1200px;
  margin-top: -80px;
  margin: auto;
  position: relative;
}
#content .a1 {
  /* float: left; */
  margin-left: 10px;
  position: absolute;
}
.a11 {
  margin-left: -9%;
}
#content .a1 .big {
  /* float: left; */
  width: 450px;
  height: 400px;
}
#content .a11 ul li {
  list-style: none;
  float: left;
  margin: 0px 13px;
}
.a11 ul li img {
  border: 3px white solid;
  width: 80px;
  height: 80px;
}
.a11 ul li img:hover {
  border: 3px #1c92d2 solid;
}
.a2 {
  margin-left: 50%;
  position: absolute;
}
.a21 .color {
  color: #758188;
}
.a21 .a211 {
  background-color: #f2f5f8;
  color: #758188;
}
.a21 .a211 .prices,
.shic {
  margin-left: 40px;
}
.a21 .a211 .prices {
  color: #ff4f0d;
  font-size: 35px;
  font-weight: bold;
}
.a21 .a211 .prices2 {
  text-decoration: line-through;
}
.a21 .a211 .yis {
  margin-left: 230px;
}
.a22 {
  background-color: #f6f9fb;
}
.a22 span,
p {
  margin-top: 10px;
}
.a22 .neir {
  margin-left: 50px;
}
.a23 {
  margin-top: 10px;
}
.a24 {
  margin-top: 10px;
}
.a24 .bang {
  display: inline-block;
  border: 3px #edf0f5 solid;
  width: 50px;
  line-height: 40px;
  margin-left: 30px;
  text-align: center;
}
.a24 .bang:hover {
  border: 3px #ff4f0d solid;
}
.a25 {
  margin-top: 32px;
  margin-left: 100px;
}
.a25 button {
  display: inline-block;
  width: 200px;
  height: 60px;
  border-radius: 4px;
  margin-left: 30px;
}
.a25 .a25color1 {
  background-color: #67a9ba;
  color: white;
  font-size: 20px;
  font-weight: bolder;
  border: 1px #005b91 solid;
}
.a25 .a25color2 {
  background-color: #1c92d2;
  color: white;
  font-size: 20px;
  font-weight: bolder;
  border: 1px #0075b2 solid;
  cursor: pointer;
}

.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.title {
  margin-bottom: 46px;
  font-size: 22px;
  border-bottom: 1px solid #f3f3f3;
  font-weight: bold;
  line-height: 58px;
}

.cont ul {
  width: 950px;
  padding-top: 16px;
  margin-left: -17px;
}

.cont ul li {
  float: left;
  margin-top: -19px;
  width: 117px;
  font-size: 14px;
  color: #999;
  text-align: center;
  /* margin-bottom: 20px; */
  list-style: none;
}

.cont .img {
  margin: 0px 20px 50px 20px;
  width: 450px;
  height: 287px;
  float: left;
  overflow: hidden;
}
</style>